<template>
  <div class="coupon-container">
    <div class="header-desc jtt-vertical-middle">
      <span class="lm-icon">盟</span>
      <span class="text">标识的是联盟收录的最优商品券</span>
      <span class="internal-icon">内</span>
      <span class="text">标识的是其他内部隐藏商品券</span>
      <span class="shop-icon">店</span>
      <span class="text">为店铺券</span>
    </div>
    <el-table
      class="tab-wrapper"
      size="mini"
      :data="c_couponList"
      empty-text="暂无优惠券！"
      border
      style="width: 100%"
    >
      <el-table-column prop="type" label="类型" width="60">
        <template slot-scope="scope">
          <span :class="typeIcon(scope.row.type)">{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="coupon" label="优惠券" :fit="true">
        <template slot-scope="scope">
          <span>满{{ scope.row.quota }}减{{ scope.row.discount_price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" width="100" label="券名称">
      </el-table-column>
      <el-table-column label="有效期" width="86">
        <template slot-scope="scope">
          <span>{{timeFormat(scope.row.endTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="broughtNumber" label="已领数量" width="70">
      </el-table-column>
      <el-table-column prop="restNumber" label="剩余数量" width="70">
      </el-table-column>
      <el-table-column prop="option" label="操作" width="75">
        <template slot-scope="scope">
          <a :href="scope.row.url" v-if="!scope.row.couponStatus">
             <button class="brought-btn">领取</button>
          </a>
          <button v-else class="brought-btn">已领取</button>
          <button class="copy-btn" @click="copy(scope.row.url)" v-if="!scope.row.couponStatus">复制</button>
        </template>
      </el-table-column>
      <template v-slot:append>
        <login-tip></login-tip>
      </template>
    </el-table>
    <foot></foot>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  computed: {
    c_couponList() {
      console.log("this.$store.state.couponModule.couponTotal.",this.$store.state.couponModule.couponTotal)
      //已领取优惠券集合
      let unionCouponList = this.$store.state.couponModule.couponTotal.currentSkuConpons.map(
        (item) => {
          this.$set(item, "discount_price", item.parValue);
          this.$set(item, "type", "店");
          this.$set(item, "couponStatus", true);
          return item
        }
      );
      //未领取优惠券
      let shopCouponList= this.$store.state.couponModule.couponTotal.skuConpons.map(
        (item) => {
          this.$set(item, "discount_price", item.discount);
          this.$set(item, "type", "店");
          return item
        }
      );
      //内部优惠券
      let innerCouponList=this.$store.state.JTTProductInfo.couponInfo.couponList.map(
        (item) => {
          this.$set(item, "discount_price", item.discount);
          this.$set(item, "type", "内");
          this.$set(item,"endTime",item.useEndTime)
          this.$set(item,"url",item.link)
          return item
        }
      );
      return [...shopCouponList,...unionCouponList,...innerCouponList];
    },
  },
  methods: {
    copy(url){
       this.$copyText(url).then(()=>{
         alert("复制成功");
       });
    },
    timeFormat(time){
      let date=new Date(time)
      let year=date.getFullYear()
      let month=(date.getMonth()+1+"").length==2?(date.getMonth()+1+""):"0"+(date.getMonth()+1+"")
      let day=(date.getDate()+"").length==2?(date.getDate()+""):"0"+(date.getDate()+"")
      return `${year}-${month}-${day}`
    },
    typeIcon(type) {
      switch (type) {
        case "盟":
          return "lm-icon";
        case "内":
          return "internal-icon";

        case "店":
          return "shop-icon";
      }
    }
  },
  mounted() {
    this.$store.dispatch("couponModule/searchCommonCoupon");
  },
};
</script>

<style lang="less" scoped>
.coupon-container {
  min-height: 100px;
  .header-desc {
    text-align: center;
    height: 38px;
    background: #fafbfe;
    border-radius: 4px;
    span {
      display: inline-block;
      vertical-align: middle;
    }

    .text {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
      margin-right: 16px;
    }
  }
  .lm-icon,
  .internal-icon,
  .shop-icon {
    display: inline-block;
    margin-right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 400;
    color: #ffffff;
  }
  .lm-icon {
    background: linear-gradient(235deg, #9b74ff, #5f5fff);
  }
  .internal-icon {
    background: linear-gradient(45deg, #ff9132, #ffa356);
  }
  .shop-icon {
    background: linear-gradient(235deg, #18c7f3, #5395f8);
  }
  .tab-wrapper {
    margin-top: 10px;
    .brought-btn {
      outline: none;
      border: none;
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #f52d36;
      background: none;
      padding: 0;
      cursor: pointer;
    }
    .copy-btn {
      margin-left: 5px;
      outline: none;
      border: none;
      display: inline-block;
      vertical-align: middle;
      font-size: 12px;
      color: #458ae6;
      background: none;
      padding: 0;
      cursor: pointer;
    }
  }
}
</style>